<template>
  <!-- Card 卡片组件。将信息聚合在卡片容器中展示。12 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div class="search-header">
        <span>线上热门搜索</span>
        <!-- Dropdown 下拉菜单组件。将动作或菜单折叠到下拉菜单中。 -->
        <el-dropdown>
          <span>
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu v-slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <!-- Layout 布局组件。通过基础的24分栏，迅速简便地创建布局。12+12 -->
      <el-row :gutter="10">
        <el-col :span="12">
          <LineChart2View></LineChart2View>
        </el-col>
        <el-col :span="12">
          <LineChart2View></LineChart2View>
        </el-col>
      </el-row>
      <!-- Table 表格组件。用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="排名" width="80" type="index"></el-table-column>
        <el-table-column label="搜搜关键字" width="180"></el-table-column>
        <el-table-column label="用户数" sortable></el-table-column>
        <el-table-column label="周涨幅" sortable></el-table-column>
      </el-table>
      <br>
      <!-- Pagination 分页组件。当数据量过多时，使用分页分解数据。 -->
      <el-pagination
        class="pagination"
        :current-page="1"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        :total="100"
        layout="prev, pager, next">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import LineChart2View from '@/views/dashboard/observe/search/linechart2/LineChart2View.vue'

export default {
  name: 'SearchChartView',
  components: {
    LineChart2View
  },
  data() {
    return {
      tableData: [
        {}
      ]
    }
  }
}
</script>

<style scoped>
.box-card {
  height: 400px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.pagination {
  float: right;
}
</style>
